<template>
    <div class="header-page">
        <van-nav-bar >
            <template #left>
                <div class="address">
                    <van-icon name="location-o" />
                    <span>上海市</span>
                </div>
            </template>
            <template #title>
                <img class="logo" src="../assets/logo.png"/>
            </template>
            <template #right>
                <van-icon class="cart-icon" size="24px" name="search" />
                <van-icon size="24px" name="ellipsis" />
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
export default{

}
</script>

<style>
.address{
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 16px;
}
.address span{
    margin-left: 8px;
}
.address .van-icon{
    font-size: 16px !important;
}
.van-nav-bar .van-icon {
    color: #ccc;
    font-size: 28px;
}
.header-page .logo{
    width: 90px;
}
.header-page .cart-icon{
    position: relative;
    margin-right: 20px;
}
.header-page .cart-icon::after{
    position: absolute;
    top: 20%;
    right: -10px;
    content: "";
    width: 1px;
    height: 60%;
    background: #ccc;
}
</style>
